<template>
    <!-- 为 ECharts 准备一个定义了宽高的 DOM -->
    <div id="echart-line" style="width: 100%;height: 600px"></div>
</template>
<script>

import china from "@/assets/china.json";
// import '@/assets/china.js'
import * as echarts from 'echarts'

export default {
    data() {
        return {
            areaData: [
                { name: '北京市', value: 1 },
                { name: '天津市', value: 2 },
                { name: '河北省', value: 5 },
                { name: '山西省', value: 7 },
                { name: '内蒙古省', value: 10 },
                { name: '辽宁省', value: 12 },
                { name: '吉林省', value: 15 },
                { name: '黑龙江省', value: 18 },
                { name: '上海市', value: 20 },
                { name: '江苏省', value: 22 },
                { name: '浙江省', value: 25 },
                { name: '安徽省', value: 30 },
                { name: '福建省', value: 34 },
                { name: '江西省', value: 96 },
                { name: '山东省', value: 92 },
                { name: '河南省', value: 13 },
                { name: '湖北省', value: 27 },
                { name: '湖南省', value: 17 },
                { name: '广东省', value: 38 },
                { name: '广西省', value: 59 },
                { name: '海南省', value: 54 },
                { name: '重庆市', value: 66 },
                { name: '四川省', value: 8 },
                { name: '贵州省', value: 1 },
                { name: '云南省', value: 25 },
                { name: '陕西省', value: 25 },
                { name: '甘肃省', value: 19 },
                { name: '青海省', value: 17 },
                { name: '台湾省', value: 8 },
            ]
        }
    },
    methods: {
        initChart() {
            let chartDom = document.getElementById('echart-line');
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(chartDom);
            echarts.registerMap("china", china);
            const option = {
                // 背景颜色
                backgroundColor: "#fff",
                // 提示浮窗样式
                tooltip: {
                    show: true,
                    trigger: 'item', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
                    axisPointer: {// 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    },
                    alwaysShowContent: false,
                    backgroundColor: "#fff",
                    borderColor: "rgba(0, 0, 0, 0.16);",
                    triggerOn: "mousemove",
                    enterable: true, //鼠标是否可进入提示框浮层中
                    textStyle: {
                        fontSize: "12",
                        overflow: "break",
                    },
                    formatter: (params) => `<div> ` + params.name + `:` + params.value + `</div>`
                    // formatter: function (params) {
                    //     let str = '';
                    //     str = `<div> ` + params.name + `:` + params.value + `</div>`
                    //     return str
                    // },
                },
                visualMap: { //分段型视觉映射组件
                    show: true,
                    type: 'piecewise',
                    left: 50,
                    bottom: 50,
                    showLabel: true,
                    itemWidth: 10,
                    itemHeight: 10,
                    inverse: true,
                    // lt:小于; lte:小于等于; gt:大于; gte:大于等于;
                    pieces: [
                        {
                            lt: 5,
                            label: "<5ms",
                            color: "#83CBAC"
                        },
                        {
                            gte: 5,
                            lte: 10,
                            label: "5-10ms",
                            color: "#55BB8A"
                        },
                        {
                            gt: 10,
                            lte: 15,
                            label: "10-15ms",
                            color: "#20A162"
                        },
                        {
                            gt: 15,
                            lte: 20,
                            label: "15-20ms",
                            color: "#9ABEFA"
                        },
                        {
                            gt: 20,
                            lte: 30,
                            label: '20-30ms',
                            color: "#78A9F9"
                        },
                        {
                            gt: 30,
                            label: '>30ms',
                            color: "#5693F7"
                        }
                    ]
                },
                // 地图配置
                geo: {
                    map: "china",
                    aspectScale: 0.8, //长宽比,0.75的含义为宽是高的0.75,假如高为100,宽就只有75;0.5的含义就是宽只有高的一半,假如高为100,宽就只有50
                    zoom: 1.6, //视觉比例大小,1.2即为原有大小的1.2倍
                    roam: false, //是否开启鼠标缩放和平移漫游。默认不开启。可以不用设置,如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。
                    top: '25%',
                    label: {
                        // 通常状态下的样式
                        normal: {
                            show: true,
                            textStyle: {
                                color: "#000000",
                            },
                        },
                        // 鼠标放上去的样式
                        emphasis: {
                            textStyle: {
                                color: "#fff",
                            },
                        },
                    },
                    // 地图区域的样式设置
                    itemStyle: {
                        normal: {
                            borderColor: "rgba(0, 0, 0, 0.1)",
                            borderWidth: 1,
                        },
                        // 鼠标放上去高亮的样式
                        emphasis: {
                            borderWidth: 0,
                        },
                    },
                },
                series: [
                    {
                        selectedMode: false, //取消地图区域点击事件
                        geoIndex: 0,  //将数据和第0个geo配置关联在一起
                        type: 'map',
                        data: this.areaData
                    },
                ],
            }
            // 地图注册，第一个参数的名字必须和option.geo.map一致
            option && myChart.setOption(option);
        },

    }

}
</script>
